<template>
  <view class="b-content">
    <view class="lean-bg-public">
      <view class="title">
        <view class="u-back-wrap" @tap="goBack">
          <view class="u-icon-wrap">
            <u-icon name="nav-back" color="#606266" size="44"></u-icon>
          </view>
        </view>
        <span>优惠券明细</span>
      </view>
      <view class="navbar">
        <!-- 循环出头部tab栏 -->
        <view
          v-for="(item, index) in navList"
          :key="index"
          class="nav-item"
          @click="handleTabClick(index)"
          ><text :class="{ current: tabCurrentIndex === index }">{{
            item.text
          }}</text></view
        >
      </view>
    </view>
    <swiper
      :current="tabCurrentIndex"
      class="swiper-box"
      duration="300"
      @change="changeTab"
    >
      <swiper-item
        class="tab-content"
        v-for="(navItem, navIndex) in navList"
        :key="navIndex"
      >
        <scroll-view
          class="list-scroll-content"
          scroll-y
          @scrolltolower="loadData"
        >
          <!-- 空白页 -->
          <u-empty
            mode="coupon"
            text="暂无优惠券"
            src="/static/img/coupon-empty.png"
            v-if="navItem.whetherEmpty"
            style="margin-top: 190rpx"
          ></u-empty>

          <!-- 数据 -->
          <!-- v-if="navItem.dataList && coupon" -->
          <view
            v-if="navItem.dataList && coupon"
            class="coupon-item"
            v-for="(coupon, index) in navItem.dataList"
            :key="index"
          >
            <view class="left">
              <view class="message">
                <view class="price wes" v-if="coupon.couponType == 'DISCOUNT'"
                  >{{ coupon.discount }}
                  <span class="small-text">折</span></view
                >
                <view class="price wes" v-else
                  >{{ coupon.price }}<span class="small-text">元</span></view
                >
                <view class="sub-price wes"
                  >满{{ coupon.consumeThreshold | unitPrice }}可用</view
                >
              </view>
            </view>
            <view class="line"></view>
            <view class="right" v-if="coupon">
              <view class="content">
                <view class="title-1">{{ coupon.title }}</view>
                <view class="title-2"
                  >使用范围：{{
                    coupon.scopeType == "ALL" && coupon.storeId == "0"
                      ? "全平台"
                      : coupon.scopeType == "PORTION_GOODS"
                      ? "部分商品"
                      : coupon.scopeType == "PORTION_GOODS_CATEGORY"
                      ? "部分分类商品"
                      : coupon.storeName == "platform"
                      ? "全平台"
                      : coupon.storeName + ""
                  }}使用</view
                >
                <view v-if="coupon.endTime" class="time"
                  >有效期至{{ coupon.endTime }}</view
                >
              </view>
              <view
                class="receive"
                v-if="navIndex == 0"
                @click="useItNow(coupon)"
              >
                <text>去使用</text>
              </view>
            </view>
          </view>
          <uni-load-more :status="navItem.loadStatus"></uni-load-more>
        </scroll-view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
import { getMemberCoupons } from "@/api/members.js";
import views from "../../tabbar/home/views.vue";

export default {
  components: { views },
  data() {
    return {
      tabCurrentIndex: 0, //tab栏下标默认为0 未使用
      navList: [
        //每个tab存储的信息
        {
          text: "未使用",
          loadStatus: "more",
          dataList: [],
          params: {
            memberCouponStatus: "NEW",
            pageNumber: 1,
            pageSize: 10,
            status: 1,
          },
          whetherEmpty: false,
        },
        {
          text: "已使用",
          loadStatus: "more",
          dataList: [],
          params: {
            memberCouponStatus: "USED",
            pageNumber: 1,
            pageSize: 10,
            status: 2,
          },
          whetherEmpty: false,
        },
        {
          text: "已过期",
          loadStatus: "more",
          dataList: [],
          params: {
            memberCouponStatus: "EXPIRE",
            pageNumber: 1,
            pageSize: 10,
            status: 3,
          },
          whetherEmpty: false,
        },
      ],
      couponList: [], //优惠券列表
    };
  },

  onShow() {
    this.navList[this.tabCurrentIndex].params.pageNumber = 1;
    this.navList[this.tabCurrentIndex].dataList = [];
    this.getData();
  },

  watch: {
    /**
     * 监听切换顶部tab栏实现刷新数据
     */
    tabCurrentIndex(val) {
      if (this.navList[val].dataList.length == 0) this.getData();
    },
  },
  methods: {
    /**
     * 顶部tab点击
     */
    handleTabClick(index) {
      this.tabCurrentIndex = index;
    },

    /**
     * 读取优惠券
     */
    getData() {
      uni.showLoading({
        title: "加载中",
      });
      let index = this.tabCurrentIndex;
      getMemberCoupons(this.navList[index].params).then((res) => {
        uni.stopPullDownRefresh();
        if (res.data.success) {
          let data = res.data.result.records;
          if (data.length == 0) {
            if (res.data.pageNumber == 1) {
              this.navList[index].whetherEmpty = true;
            } else {
              this.navList[index].loadStatus = "noMore";
            }
          } else if (data.length < 10) {
            this.navList[index].loadStatus = "noMore";
            this.navList[index].dataList.push(...data);
          } else {
            this.navList[index].dataList.push(...data);
          }
        }
        if (this.$store.state.isShowToast) {
          uni.hideLoading();
        }
      });
    },

    /**
     * 切换tab
     */
    changeTab(e) {
      this.tabCurrentIndex = e.target.current;
    },

    /**
     * 加载数据
     */
    loadData() {
      let index = this.tabCurrentIndex;
      if (this.navList[index].loadStatus != "noMore") {
        this.navList[index].params.pageNumber++;
        this.getData();
      }
    },

    /**
     * 立即使用优惠券
     */
    useItNow(item) {
      uni.navigateTo({
        url: `/pages/navigation/search/searchPage?promotionsId=${item.couponId}&promotionType=COUPON`,
      });
    },

    /**
     * 优惠券详情
     */
    couponDetail(item) {
      uni.navigateTo({
        url:
          "/pages/cart/coupon/couponDetail?item=" +
          encodeURIComponent(JSON.stringify(item)),
      });
    },
    goBack() {
      uni.navigateBack();
    },
  },
};
</script>

<style lang="scss" scoped>
@import "../../../uni.scss";
.lean-bg-public {
  width: 100%;
  height: 245rpx;
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
  box-sizing: border-box;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999999;
  overflow: hidden;
  .title {
    height: 88rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    font-size: 34rpx;
    color: #191919;
    font-weight: 500;
  }
  .u-back-wrap {
    display: flex;
    align-items: center;
    flex: 1;
    flex-grow: 0;
    padding: 14rpx 14rpx 14rpx 24rpx;
  }
  .u-icon-wrap {
    position: absolute;
    left: 25rpx;
    top: 19rpx;
  }
}
page {
  height: 100%;
}
$item-color: #fff;

.b-content {
  background: #f5f5f5;
  height: 100%;
  overflow: hidden;
}

.swiper-box {
  height: calc(100vh - 150px);
  margin-top: 190rpx;
  border-top-left-radius: 40rpx;
  border-top-right-radius: 40rpx;
  padding: 16rpx 24rpx 0;
  box-sizing: border-box;
}

.list-scroll-content {
  height: 100%;
  width: 100%;

  .coupon-item {
    display: flex;
    align-items: center;
    height: 172rpx;
    margin-bottom: 20rpx;

    .left {
      height: 100%;
      width: 172rpx;
      background-color: #fff;
      border-radius: 30rpx;
      // position: relative;

      .message {
        color: #009968;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 100%;
        .small-text {
          font-size: 24rpx;
        }

        view:nth-child(1) {
          font-weight: bold;
          font-size: 60rpx;
          max-width: 172rpx;
        }

        view:nth-child(2) {
          font-size: $font-sm;
        }
        .sub-price {
          overflow: hidden;
          word-wrap: normal;
          white-space: nowrap;
          text-overflow: ellipsis;
          max-width: 172rpx;
        }
      }
    }
    .line {
      width: 1rpx;
      height: 118rpx;
      background: #fffbfb;
      border: 1rpx dashed #009968;
      opacity: 0.3;
    }

    .right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 529rpx;
      font-size: 26rpx;
      height: 100%;
      background-color: #ffffff;
      overflow: hidden;
      position: relative;
      border-radius: 30rpx;

      .content {
        color: #212121;
        margin-left: 20rpx;
        line-height: 2em;
        > view:nth-child(1) {
          color: #ff6262;
          font-size: 30rpx;
        }

        .title-1,
        .title-2,
        .title-3 {
          font-size: 26rpx;
        }
        .time {
          color: #757575;
        }
      }
      .receive {
        color: #ffffff;
        background-color: #009968;
        border-radius: 24rpx;
        width: 104rpx;
        height: 48rpx;
        text-align: center;
        margin-right: 24rpx;
        line-height: 48rpx;
        // padding-top: 8rpx;
        // position: relative;
        // z-index: 2;
      }

      .jiao-1 {
        background-color: #ffc71c;
        width: 400rpx;
        transform: rotate(45deg);
        text-align: center;
        position: absolute;
        color: #ffffff;
        right: -130rpx;
        top: 0;
        .text-1 {
          margin-left: 68rpx;
          font-size: 28rpx;
        }
        .text-2 {
          margin-left: 68rpx;
          font-size: 28rpx;
        }
      }
      .no-icon {
        border-radius: 50%;
        width: 86rpx;
        height: 86rpx;
        margin-right: 48rpx;
        position: relative;
        z-index: 2;
      }
      .bg-quan {
        width: 244rpx;
        height: 244rpx;
        border: 6rpx solid $main-color;
        border-radius: 50%;
        opacity: 0.1;
        color: $main-color;
        text-align: center;
        padding-top: 30rpx;
        font-size: 130rpx;
        position: absolute;
        right: -54rpx;
        bottom: -60rpx;
      }
    }
  }
}

.navbar {
  display: flex;
  height: 88rpx;
  color: #757575;
  position: relative;
  z-index: 10;
  margin-top: 24rpx;

  .nav-item {
    flex: 1;
    height: 100%;
    font-size: 26rpx;
    color: #757575;
    position: relative;
    text-align: center;
    text {
      line-height: 88rpx;
    }
    .current {
      font-weight: bold;
      font-size: 28rpx;
      color: #212121;
      &:after {
        content: "";
        position: absolute;
        bottom: 10rpx;
        left: 108rpx;
        width: 30rpx;
        border-bottom: 2px solid #000;
      }
    }
  }
}
</style>
